<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 计算组件</title>
    <link rel="stylesheet" href="../libs/fontawesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="../common/base.css">
    <link rel="stylesheet" href="./cal_1.css">
</head>
<body>
    <div class="page-container">
        <!-- 页面标题 -->
        <header class="page-header">
            <h1 class="page-title">
                <i class="fas fa-calculator"></i>
                交通信号优化计算引擎
            </h1>
            <p class="page-subtitle">干线协调优化 & 单点优化智能计算平台</p>
        </header>

        <!-- 计算模式选择 -->
        <section class="mode-selector">
            <div class="mode-tabs">
                <button class="mode-tab active" data-mode="arterial">
                    <i class="fas fa-road"></i>
                    <span class="tab-text">干线协调优化</span>
                    <span class="tab-desc">多路口协调控制</span>
                </button>
                <button class="mode-tab" data-mode="single">
                    <i class="fas fa-traffic-light"></i>
                    <span class="tab-text">单点优化</span>
                    <span class="tab-desc">单路口信号优化</span>
                </button>
            </div>
        </section>

        <!-- 干线协调优化计算区域 -->
        <section id="arterial-mode" class="calc-section active">
            <div class="calc-layout">
                <!-- 参数输入区 -->
                <div class="input-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <i class="fas fa-sliders-h"></i>
                            参数配置
                        </h3>
                        <button class="reset-btn">
                            <i class="fas fa-undo"></i>
                            重置
                        </button>
                    </div>
                    
                    <div class="param-groups">
                        <!-- 基础参数组 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-cogs"></i>
                                基础参数
                            </h4>
                            <div class="param-grid">
                                <div class="param-item">
                                    <label for="intersection-count">路口数量</label>
                                    <input type="number" id="intersection-count" value="5" min="2" max="20">
                                    <span class="param-unit">个</span>
                                </div>
                                <div class="param-item">
                                    <label for="cycle-length">周期时长</label>
                                    <input type="number" id="cycle-length" value="120" min="60" max="300">
                                    <span class="param-unit">秒</span>
                                </div>
                                <div class="param-item">
                                    <label for="green-wave-speed">绿波车速</label>
                                    <input type="number" id="green-wave-speed" value="50" min="30" max="80">
                                    <span class="param-unit">km/h</span>
                                </div>
                                <div class="param-item">
                                    <label for="bandwidth-target">带宽目标</label>
                                    <input type="number" id="bandwidth-target" value="60" min="20" max="90">
                                    <span class="param-unit">%</span>
                                </div>
                            </div>
                        </div>

                        <!-- 流量参数组 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-chart-line"></i>
                                流量参数
                            </h4>
                            <div class="param-grid">
                                <div class="param-item">
                                    <label for="peak-volume">高峰流量</label>
                                    <input type="number" id="peak-volume" value="1800" min="500" max="3000">
                                    <span class="param-unit">辆/h</span>
                                </div>
                                <div class="param-item">
                                    <label for="saturation-ratio">饱和度</label>
                                    <input type="number" id="saturation-ratio" value="0.85" min="0.5" max="1.0" step="0.01">
                                    <span class="param-unit"></span>
                                </div>
                                <div class="param-item">
                                    <label for="turning-ratio">转向比例</label>
                                    <input type="number" id="turning-ratio" value="25" min="10" max="50">
                                    <span class="param-unit">%</span>
                                </div>
                                <div class="param-item">
                                    <label for="volume-variation">流量变异</label>
                                    <input type="number" id="volume-variation" value="15" min="5" max="30">
                                    <span class="param-unit">%</span>
                                </div>
                            </div>
                        </div>

                        <!-- 约束条件组 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-shield-alt"></i>
                                约束条件
                            </h4>
                            <div class="param-grid">
                                <div class="param-item">
                                    <label for="min-green">最小绿灯</label>
                                    <input type="number" id="min-green" value="20" min="10" max="40">
                                    <span class="param-unit">秒</span>
                                </div>
                                <div class="param-item">
                                    <label for="max-green">最大绿灯</label>
                                    <input type="number" id="max-green" value="80" min="40" max="120">
                                    <span class="param-unit">秒</span>
                                </div>
                                <div class="param-item">
                                    <label for="pedestrian-time">行人过街</label>
                                    <input type="number" id="pedestrian-time" value="30" min="20" max="60">
                                    <span class="param-unit">秒</span>
                                </div>
                                <div class="param-item">
                                    <label for="clearance-time">清空时间</label>
                                    <input type="number" id="clearance-time" value="5" min="3" max="10">
                                    <span class="param-unit">秒</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 计算按钮 -->
                    <div class="calc-actions">
                        <button class="calc-btn primary">
                            <i class="fas fa-play"></i>
                            开始计算
                        </button>
                        <button class="calc-btn secondary">
                            <i class="fas fa-chart-bar"></i>
                            预览结果
                        </button>
                    </div>
                </div>

                <!-- 计算过程区 -->
                <div class="process-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <i class="fas fa-cog fa-spin"></i>
                            计算过程
                        </h3>
                        <div class="process-status">
                            <span class="status-text">准备就绪</span>
                            <div class="status-indicator ready"></div>
                        </div>
                    </div>

                    <div class="process-steps">
                        <div class="step-item completed">
                            <div class="step-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="step-content">
                                <h5 class="step-title">参数验证</h5>
                                <p class="step-desc">验证输入参数的有效性</p>
                                <span class="step-time">0.02s</span>
                            </div>
                        </div>

                        <div class="step-item processing">
                            <div class="step-icon">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                            <div class="step-content">
                                <h5 class="step-title">流量建模</h5>
                                <p class="step-desc">构建交通流量数学模型</p>
                                <div class="step-progress">
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 65%"></div>
                                    </div>
                                    <span class="progress-text">65%</span>
                                </div>
                            </div>
                        </div>

                        <div class="step-item pending">
                            <div class="step-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="step-content">
                                <h5 class="step-title">协调计算</h5>
                                <p class="step-desc">计算最优协调方案</p>
                            </div>
                        </div>

                        <div class="step-item pending">
                            <div class="step-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="step-content">
                                <h5 class="step-title">方案优化</h5>
                                <p class="step-desc">优化配时参数</p>
                            </div>
                        </div>

                        <div class="step-item pending">
                            <div class="step-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="step-content">
                                <h5 class="step-title">结果生成</h5>
                                <p class="step-desc">生成优化结果报告</p>
                            </div>
                        </div>
                    </div>

                    <!-- 实时日志 -->
                    <div class="calc-log">
                        <h4 class="log-title">
                            <i class="fas fa-terminal"></i>
                            计算日志
                        </h4>
                        <div class="log-content">
                            <div class="log-entry info">
                                <span class="log-time">14:30:15</span>
                                <span class="log-level">[INFO]</span>
                                <span class="log-message">开始干线协调优化计算...</span>
                            </div>
                            <div class="log-entry success">
                                <span class="log-time">14:30:16</span>
                                <span class="log-level">[SUCCESS]</span>
                                <span class="log-message">参数验证完成，所有参数有效</span>
                            </div>
                            <div class="log-entry warning">
                                <span class="log-time">14:30:18</span>
                                <span class="log-level">[WARNING]</span>
                                <span class="log-message">检测到高饱和度路口，建议调整周期时长</span>
                            </div>
                            <div class="log-entry info">
                                <span class="log-time">14:30:20</span>
                                <span class="log-level">[INFO]</span>
                                <span class="log-message">正在构建交通流量模型...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 结果展示区 -->
                <div class="result-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <i class="fas fa-chart-pie"></i>
                            计算结果
                        </h3>
                        <div class="result-actions">
                            <button class="action-btn">
                                <i class="fas fa-download"></i>
                                导出
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-share"></i>
                                分享
                            </button>
                        </div>
                    </div>

                    <!-- 关键指标 -->
                    <div class="key-metrics">
                        <div class="metric-card excellent">
                            <div class="metric-icon">
                                <i class="fas fa-tachometer-alt"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">85.6</span>
                                <span class="unit">%</span>
                            </div>
                            <div class="metric-label">协调效率</div>
                            <div class="metric-change positive">
                                <i class="fas fa-arrow-up"></i>
                                +12.3%
                            </div>
                        </div>

                        <div class="metric-card good">
                            <div class="metric-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">32.5</span>
                                <span class="unit">s</span>
                            </div>
                            <div class="metric-label">平均延误</div>
                            <div class="metric-change negative">
                                <i class="fas fa-arrow-down"></i>
                                -18.7%
                            </div>
                        </div>

                        <div class="metric-card excellent">
                            <div class="metric-icon">
                                <i class="fas fa-road"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">67.8</span>
                                <span class="unit">%</span>
                            </div>
                            <div class="metric-label">绿波带宽</div>
                            <div class="metric-change positive">
                                <i class="fas fa-arrow-up"></i>
                                +25.1%
                            </div>
                        </div>

                        <div class="metric-card warning">
                            <div class="metric-icon">
                                <i class="fas fa-gas-pump"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">8.9</span>
                                <span class="unit">L/km</span>
                            </div>
                            <div class="metric-label">燃油消耗</div>
                            <div class="metric-change negative">
                                <i class="fas fa-arrow-down"></i>
                                -14.2%
                            </div>
                        </div>
                    </div>

                    <!-- 优化方案表格 -->
                    <div class="result-table">
                        <h4 class="table-title">
                            <i class="fas fa-table"></i>
                            优化配时方案
                        </h4>
                        <table class="optimization-table">
                            <thead>
                                <tr>
                                    <th>路口编号</th>
                                    <th>路口名称</th>
                                    <th>绿灯时长</th>
                                    <th>相位差</th>
                                    <th>饱和度</th>
                                    <th>延误时间</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>JT-001</td>
                                    <td>解放路-建设街</td>
                                    <td class="number-cell">45s</td>
                                    <td class="number-cell">0s</td>
                                    <td class="number-cell good">0.82</td>
                                    <td class="number-cell">28s</td>
                                    <td><span class="status-badge status-excellent">优秀</span></td>
                                </tr>
                                <tr>
                                    <td>JT-002</td>
                                    <td>解放路-民主街</td>
                                    <td class="number-cell">42s</td>
                                    <td class="number-cell">12s</td>
                                    <td class="number-cell warning">0.89</td>
                                    <td class="number-cell">35s</td>
                                    <td><span class="status-badge status-good">良好</span></td>
                                </tr>
                                <tr>
                                    <td>JT-003</td>
                                    <td>解放路-人民街</td>
                                    <td class="number-cell">48s</td>
                                    <td class="number-cell">25s</td>
                                    <td class="number-cell good">0.76</td>
                                    <td class="number-cell">31s</td>
                                    <td><span class="status-badge status-excellent">优秀</span></td>
                                </tr>
                                <tr>
                                    <td>JT-004</td>
                                    <td>解放路-光明街</td>
                                    <td class="number-cell">40s</td>
                                    <td class="number-cell">38s</td>
                                    <td class="number-cell excellent">0.68</td>
                                    <td class="number-cell">22s</td>
                                    <td><span class="status-badge status-excellent">优秀</span></td>
                                </tr>
                                <tr>
                                    <td>JT-005</td>
                                    <td>解放路-胜利街</td>
                                    <td class="number-cell">46s</td>
                                    <td class="number-cell">52s</td>
                                    <td class="number-cell good">0.79</td>
                                    <td class="number-cell">29s</td>
                                    <td><span class="status-badge status-good">良好</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <!-- 单点优化计算区域 -->
        <section id="single-mode" class="calc-section">
            <div class="calc-layout">
                <!-- 单点优化参数输入 -->
                <div class="input-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <i class="fas fa-sliders-h"></i>
                            单点参数
                        </h3>
                        <button class="reset-btn">
                            <i class="fas fa-undo"></i>
                            重置
                        </button>
                    </div>
                    
                    <div class="param-groups">
                        <!-- 路口基础信息 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-map-marker-alt"></i>
                                路口信息
                            </h4>
                            <div class="param-grid">
                                <div class="param-item full-width">
                                    <label for="intersection-name">路口名称</label>
                                    <input type="text" id="intersection-name" value="解放路-建设街路口" placeholder="请输入路口名称">
                                </div>
                                <div class="param-item">
                                    <label for="phase-count">相位数量</label>
                                    <select id="phase-count">
                                        <option value="2">2相位</option>
                                        <option value="4" selected>4相位</option>
                                        <option value="8">8相位</option>
                                    </select>
                                </div>
                                <div class="param-item">
                                    <label for="single-cycle">周期时长</label>
                                    <input type="number" id="single-cycle" value="120" min="60" max="180">
                                    <span class="param-unit">秒</span>
                                </div>
                            </div>
                        </div>

                        <!-- 流向流量 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-arrows-alt"></i>
                                流向流量
                            </h4>
                            <div class="flow-matrix">
                                <div class="flow-direction">
                                    <label>东进口</label>
                                    <div class="flow-inputs">
                                        <input type="number" placeholder="直行" value="800">
                                        <input type="number" placeholder="左转" value="200">
                                        <input type="number" placeholder="右转" value="150">
                                    </div>
                                </div>
                                <div class="flow-direction">
                                    <label>西进口</label>
                                    <div class="flow-inputs">
                                        <input type="number" placeholder="直行" value="750">
                                        <input type="number" placeholder="左转" value="180">
                                        <input type="number" placeholder="右转" value="120">
                                    </div>
                                </div>
                                <div class="flow-direction">
                                    <label>南进口</label>
                                    <div class="flow-inputs">
                                        <input type="number" placeholder="直行" value="600">
                                        <input type="number" placeholder="左转" value="160">
                                        <input type="number" placeholder="右转" value="100">
                                    </div>
                                </div>
                                <div class="flow-direction">
                                    <label>北进口</label>
                                    <div class="flow-inputs">
                                        <input type="number" placeholder="直行" value="650">
                                        <input type="number" placeholder="左转" value="170">
                                        <input type="number" placeholder="右转" value="110">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 优化目标 -->
                        <div class="param-group">
                            <h4 class="group-title">
                                <i class="fas fa-bullseye"></i>
                                优化目标
                            </h4>
                            <div class="objective-options">
                                <label class="objective-item">
                                    <input type="radio" name="objective" value="delay" checked>
                                    <span class="radio-custom"></span>
                                    <div class="objective-content">
                                        <strong>最小延误</strong>
                                        <p>最小化车辆平均延误时间</p>
                                    </div>
                                </label>
                                <label class="objective-item">
                                    <input type="radio" name="objective" value="capacity">
                                    <span class="radio-custom"></span>
                                    <div class="objective-content">
                                        <strong>最大通行能力</strong>
                                        <p>最大化路口通行能力</p>
                                    </div>
                                </label>
                                <label class="objective-item">
                                    <input type="radio" name="objective" value="balance">
                                    <span class="radio-custom"></span>
                                    <div class="objective-content">
                                        <strong>综合优化</strong>
                                        <p>平衡延误和通行能力</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- 单点计算按钮 -->
                    <div class="calc-actions">
                        <button class="calc-btn primary">
                            <i class="fas fa-play"></i>
                            开始优化
                        </button>
                        <button class="calc-btn secondary">
                            <i class="fas fa-eye"></i>
                            预览方案
                        </button>
                    </div>
                </div>

                <!-- 单点计算结果 -->
                <div class="result-panel single-result">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <i class="fas fa-trophy"></i>
                            优化结果
                        </h3>
                    </div>

                    <!-- 单点关键指标 -->
                    <div class="single-metrics">
                        <div class="metric-card excellent">
                            <div class="metric-icon">
                                <i class="fas fa-stopwatch"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">28.5</span>
                                <span class="unit">s</span>
                            </div>
                            <div class="metric-label">平均延误</div>
                        </div>

                        <div class="metric-card good">
                            <div class="metric-icon">
                                <i class="fas fa-tachometer-alt"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">0.78</span>
                                <span class="unit"></span>
                            </div>
                            <div class="metric-label">饱和度</div>
                        </div>

                        <div class="metric-card excellent">
                            <div class="metric-icon">
                                <i class="fas fa-cars"></i>
                            </div>
                            <div class="metric-value">
                                <span class="value">3245</span>
                                <span class="unit">辆/h</span>
                            </div>
                            <div class="metric-label">通行能力</div>
                        </div>
                    </div>

                    <!-- 相位配时方案 -->
                    <div class="phase-timing">
                        <h4 class="timing-title">
                            <i class="fas fa-clock"></i>
                            相位配时方案
                        </h4>
                        <div class="timing-chart">
                            <div class="phase-bar">
                                <div class="phase-segment phase-1" style="width: 37.5%">
                                    <span class="phase-label">相位1</span>
                                    <span class="phase-time">45s</span>
                                </div>
                                <div class="phase-segment phase-2" style="width: 25%">
                                    <span class="phase-label">相位2</span>
                                    <span class="phase-time">30s</span>
                                </div>
                                <div class="phase-segment phase-3" style="width: 29.2%">
                                    <span class="phase-label">相位3</span>
                                    <span class="phase-time">35s</span>
                                </div>
                                <div class="phase-segment phase-4" style="width: 8.3%">
                                    <span class="phase-label">全红</span>
                                    <span class="phase-time">10s</span>
                                </div>
                            </div>
                            <div class="timing-scale">
                                <span>0s</span>
                                <span>30s</span>
                                <span>60s</span>
                                <span>90s</span>
                                <span>120s</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- JavaScript 交互逻辑 -->
    <script src="./cal_1.js"></script>
</body>
</html>